import React, { Dispatch, SetStateAction } from 'react';
import { RadioLabelType } from './radio';
import classNames from 'classnames';

export type RadioGroupSetValue = Dispatch<SetStateAction<RadioLabelType>> | ((value: RadioLabelType) => void)

interface RadioGroupProps {
    children?: React.ReactNode
    className?: string
    value: RadioLabelType
    setValue: RadioGroupSetValue
    onChange?: RadioGroupSetValue
}

export const UseRadioGroupContext = React.createContext<{ radioGroupValue: RadioLabelType | null, setGroupValue: RadioGroupSetValue | null, onRadioGroupChange: RadioGroupSetValue | undefined }>({ radioGroupValue: null, setGroupValue: null, onRadioGroupChange: undefined });

const RadioGroup: React.FC<RadioGroupProps> = (props) => {

    const { className, children, value, setValue, onChange } = props;

    const classes = classNames('yulang-radio-group-container', className);

    return <div className={classes}>
        <UseRadioGroupContext.Provider value={{ radioGroupValue: value, setGroupValue: setValue, onRadioGroupChange: onChange }}>
            {children}
        </UseRadioGroupContext.Provider>
    </div >
}

export default RadioGroup;